<template>
    <div class="detail" style="overflow: hidden;background: #fff">
      <!--<div style="width: 4vw;height:4vw;float: right;margin-top: 3.3vw;">
        <img src="../../assets/img/glare.png" alt="" style="width:100%;height: 100%;position: relative;right:4vw;">
      </div>-->
        <div class="detail-tab">
          <header style="position:fixed;z-index: 1;">
            <div style="margin: 0px auto;width: 55vw;" class="topbar">
              <a @click="produc" ><span>商品</span></a>
              <a style="margin-left: 13vw;margin-right: 13.3vw" @click="detai"><span>详情</span></a>
              <a @click="good"><span>推荐</span></a>
            </div>
          </header>
          <div style="width:100vw;height:100vh;" class="content1">
            <products :goodsType="goodsType" :goodsInfo="goodsInfo" :swipeImg="swipeImg"
            :promise="promise" :types="type" :time="time" :isNew="isNew" class="product"
                      id="product" :limit="limit" :group="group" :limitType="limitType"
                      :buyLimit="buyLimit" :presale="presale" :activity="activity"></products>
            <div class="detail-rule-wrap">
              <!--<sku></sku>,
              <div v-if="coupons===0">
                <coupon :coupon="coupons"></coupon>
              </div>
              <div v-else></div>-->
            </div>
            <!--    <comment :goodsInfo="goodsInfo" style="    margin-top: -10px;border-top: 10px solid #f5f5f5;"></comment>
            <router-link to="#"  class="checkComment">
              <p>查看全部评价</p>
            </router-link>-->
            <div class="choose" @click="choose"  id="detail">
              <p>选择 <span>&nbsp;尺码&nbsp;</span> 和 <span>&nbsp;颜色&nbsp;</span></p>
            </div>
            <div class="chooseDetail" v-show="show">
              <div class="contents ">
                <img :src="respon.image" alt="" class="img">
                <div class="price">
                  <p style="color: #FF5230;font-size: 15px;" v-if="price == 1">￥{{respon.finnal_price}}</p>
                  <p style="color: #FF5230;font-size: 15px;" v-else>￥{{finalPrice}}</p>
                  <p v-if="price == 1" style="color: #666666;font-size: 12px;text-indent: .5vw">库存：{{respon.all_store_nums}}件</p>
                  <p v-else style="color: #666666;font-size: 12px;text-indent: .5vw">库存：{{storeNums}}件</p>
                </div>
                <div class="close" @click="choose">
                  <img src="../../assets/img/close.png" alt="" >
                </div>
                <div style="margin-top: 23vw;position: absolute;left: -1vw;height: 130px;overflow:scroll;width: 100%">
                    <div v-for="(option, index) in spec" :key="index" style="padding-left: 4vw;height: auto;">
                      <p style="padding-left: 4vw;font-size: 13px;color: #333;margin-bottom: 2vw;margin-top: 3vw">{{option.name}}:</p>
                      <div class="rows" v-for="(item,ind) in option.value" :key="ind" @click="select(index,ind)">
                        <input type="radio" :name="index" :id="'label_'+index+ind" value="">
                        <label class="labe" :for="'label_'+index+ind" style="color: #333;font-size: 13px;line-height: 6.67vw;">
                          {{item.name}}
                        </label>
                      </div>
                    </div>
                </div>
                <div style="position:absolute;width: 85vw;left: 7vw;top: 59vw;">
                  <p style="float: left;font-size: 13px;color: #333;">数量</p>
                  <van-stepper v-model="chooseNum" style="float: right;"/>
                </div>
                <van-goods-action class="iphonex">
                  <van-goods-action-big-btn text="加入购物车" style="background: #000000;" @click="joinChart"/>
                  <!--<van-goods-action-big-btn text="立即购买" primary  url="#" to="/order"/>-->
                  <van-goods-action-big-btn text="立即购买" primary @click="buyGoods"/>
                </van-goods-action>
              </div>
            </div>
            <div class="chooseDetail " v-show="groupShow">
              <div class="contents groupContents">
                <img :src="respon.image" alt="" class="img">
                <div class="price">
                  <p style="color: #FF5230;font-size: 15px;" v-if="price == 1">￥{{respon.finnal_price}}</p>
                  <p style="color: #FF5230;font-size: 15px;" v-else>￥{{finalPrice}}</p>
                  <p v-if="price == 1" style="color: #666666;font-size: 12px;text-indent: .5vw">库存：{{respon.all_store_nums}}件</p>
                  <p v-else style="color: #666666;font-size: 12px;text-indent: .5vw">库存：{{storeNums}}件</p>
                </div>
                <div class="close" @click="groupchoose">
                  <img src="../../assets/img/close.png" alt="" >
                </div>
                <div style="margin-top: 23vw;position: absolute;left: -1vw;height: 130px;overflow:scroll;width: 100%">
                  <div v-for="(option, index) in spec" :key="index"  style="padding-left: 4vw;height: auto;">
                    <p style="padding-left: 4vw;font-size: 13px;color: #333;margin-bottom: 2vw;margin-top: 3vw">{{option.name}}:</p>
                    <div class="rows" style="display: inline-block;margin-left: 1vw" v-for="(item, ind) in option.value" :key="ind" @click="select(index,ind)">
                      <input type="radio" :name="index" :id="'labelGroup_'+index+ind" value="">
                      <label class="labe" :for="'labelGroup_'+index+ind" style="color: #333;font-size: 13px;line-height: 6.67vw;">
                        {{item.name}}</label>
                    </div>
                  </div>
                </div>
                <div style="position:absolute;width: 85vw;left: 7vw;top: 65vw;">
                  <p style="float: left;font-size: 13px;color: #333;">数量</p>
                  <van-stepper v-model="chooseNum" disabled style="float: right;"/>
                </div>
                <van-goods-action class="iphonex">
                  <van-goods-action-big-btn text="独自购买" primary  @click="buyGoods"/>
                  <p class="linePrice" @click="buyGoods">￥{{goodsInfo.line_price}}</p>
                  <van-goods-action-big-btn text="我要开团" @click="buyGroupGoods"/>
                  <p class="salePrece" @click="buyGroupGoods">￥{{goodsInfo.sale_price}}</p>
                </van-goods-action>
              </div>
            </div>
            <div class="chooseDetail" v-show="limitshow">
              <div class="contents ">
                <img :src="respon.image" alt="" class="img">
                <div class="price">
                  <p style="color: #FF5230;font-size: 15px;" v-if="price == 1">￥{{respon.finnal_price}}</p>
                  <p style="color: #FF5230;font-size: 15px;" v-else>￥{{finalPrice}}</p>
                  <p v-if="price == 1" style="color: #666666;font-size: 12px;text-indent: .5vw">库存：{{respon.all_store_nums}}件</p>
                  <p v-else style="color: #666666;font-size: 12px;text-indent: .5vw">库存：{{storeNums}}件</p>
                </div>
                <div class="close" @click="Limitchoose">
                  <img src="../../assets/img/close.png" alt="" >
                </div>
                <div style="margin-top: 23vw;position: absolute;left: -1vw;height: 130px;overflow:scroll;width: 100%">
                  <div v-for="(option, index) in spec" :key="index" style="padding-left: 4vw;height: auto;">
                    <p style="padding-left: 4vw;font-size: 13px;color: #333;margin-bottom: 2vw;margin-top: 3vw">{{option.name}}:</p>
                    <div class="rows" v-for="(item,ind) in option.value" :key="ind" @click="select(index,ind)">
                      <input type="radio" :name="index" :id="'labelLimit_'+index+ind" value="">
                      <label class="labe" :for="'labelLimit_'+index+ind" style="color: #333;font-size: 13px;line-height: 6.67vw;">
                        {{item.name}}
                      </label>
                    </div>
                  </div>
                </div>
                <div style="position:absolute;width: 85vw;left: 7vw;top: 59vw;">
                  <p style="float: left;font-size: 13px;color: #333;">数量</p>
                  <van-stepper v-model="chooseNum" v-if="limitType == 1" style="float: right;"/>
                  <van-stepper v-model="chooseNum" v-else disabled style="float: right;"/>
                </div>
                <van-goods-action class="iphonex">
                  <van-goods-action-big-btn text="立即购买" primary @click="buyLimitGoods"/>
                </van-goods-action>
              </div>
            </div>
            <div class="chooseDetail" v-show="joinGroupshow">
              <div class="contents ">
                <img :src="respon.image" alt="" class="img">
                <div class="price">
                  <p style="color: #FF5230;font-size: 15px;" v-if="price == 1">￥{{respon.finnal_price}}</p>
                  <p style="color: #FF5230;font-size: 15px;" v-else>￥{{finalPrice}}</p>
                  <p v-if="price == 1" style="color: #666666;font-size: 12px;text-indent: .5vw">库存：{{respon.all_store_nums}}件</p>
                  <p v-else style="color: #666666;font-size: 12px;text-indent: .5vw">库存：{{storeNums}}件</p>
                </div>
                <div class="close" @click="joinGroup">
                  <img src="../../assets/img/close.png" alt="" >
                </div>
                <div style="margin-top: 23vw;position: absolute;left: -1vw;height: 130px;overflow:scroll;width: 100%">
                  <div v-for="(option, index) in spec" :key="index" style="padding-left: 4vw;height: auto;">
                    <p style="padding-left: 4vw;font-size: 13px;color: #333;margin-bottom: 2vw;margin-top: 3vw">{{option.name}}:</p>
                    <div class="rows" v-for="(item,ind) in option.value" :key="ind" @click="select(index,ind)">
                      <input type="radio" :name="index" :id="'label_'+index+ind+1" value="">
                      <label class="labe" :for="'label_'+index+ind+1" style="color: #333;font-size: 13px;line-height: 6.67vw;">
                        {{item.name}}
                      </label>
                    </div>
                  </div>
                </div>
                <div style="position:absolute;width: 85vw;left: 7vw;top: 59vw;">
                  <p style="float: left;font-size: 13px;color: #333;">数量</p>
                  <van-stepper v-model="chooseNum" disabled style="float: right;"/>
                </div>
                <van-goods-action class="iphonex">
                  <van-goods-action-big-btn text="立即参团" primary @click="buyGroupGoods"/>
                </van-goods-action>
              </div>
            </div>
            <div style="width: 100vw;height: auto;background: #fff;
            border-bottom: 4vw solid #f5f5f5"  v-if="group.group_number !== 0">
              <div class="containeres" >
                <div class="header">
                  <div style="display: inline-block;" v-if="group.is_join_group == 0">
                    <img src="../../assets/img/ic_team.png" alt="" style="width:6vw;height: 4.37vw;">这些小伙伴已经开团
                  </div>
                  <div style="display: inline-block;" v-else>
                    我加入的团
                  </div>
                  <span @click="checkMore" style="float: right;" v-if="group.is_has == 1">查看更多
                   <img src="../../assets/img/rectang.png" alt=""></span>
                  <van-popup v-model="popup" position="bottom" class="popup">
                    <div style="width: 92vw;margin: 0px auto;">
                      <div class="group"  v-for="(groupVs,groupis) in groupList" :key="groupis">
                        <p class="open" v-html="groupVs.commander_name">
                          <!--由<span style="color: #ff9797;" class="span">{{groupV.commander_name}}</span>开团，还差
                          <span class="span" style="color: #ff4c50;">{{groupV.num}}</span>人成团-->
                        </p>
                        <footer>
                          <div class="headIcoBox" align="center">
                            <div  v-for="(icoVs,icoIs) in groupVs.join_user" style="overflow: hidden;" :key="icoIs">
                              <img :src="icoVs.head_ico" alt="" style="width: 100%;height: 100%;margin-left: -1vw">
                            </div>
                          </div>
                          <button @click="joinGroup">立即参团</button>
                        </footer>
                      </div>
                    </div>
                  </van-popup>
                </div>
                <div class="group" id="alertgroup" v-for="(groupV,groupi) in group.group_join_member" :key="groupi">
                  <p class="open"  v-html="groupV.commander_name">
                  </p>
                  <footer>
                    <div class="headIcoBox" align="center" >
                      <div style="overflow: hidden" v-for="(icoV,icoI) in groupV.join_user" :key="icoI">
                        <img :src="icoV.head_ico" alt="">
                      </div>
                    </div>
                    <button v-if="group.is_join_group == 0"  @click="joinGroup">立即参团</button>
                    <button v-else>邀请好友</button>
                  </footer>
                </div>
              </div>
            </div>
            <div>
              <div class="width:100vw;height:6vw;background:#fff"></div>
              <div class="text">
                <img src="../../assets/img/line.png" alt="">
                <p>商品詳情</p>
                <img src="../../assets/img/line.png" alt="" style="transform: rotate(180deg)">
              </div>
              <div v-html="goodsInfo.content" style="width: 100vw;height: auto;background: #fff;padding: 13px 8px 0 8px"></div>
            </div>
            <div style="width: 100vw;height:6vw;background: #f5f5f5;" id="goods"></div>
            <selectedAds></selectedAds>
          </div>

          <goodsBottom :goodsType="type" :goodsInfo="goodsInfo" :goodsId="goods_ids" :storeNums="storeNums" :is_join="is_join_group"
                       @display="showSku" @groupdisplay="groupshow" @limitDisplay="limitShow" :activity_id="activity_id"
                       :is_notice="is_notice">
          </goodsBottom>
      </div>
    </div>
</template>

<script>
import products from '../../components/detail/products'
import coupon from '../../components/vant/coupon'
import comment from '../../components/detail/comment'
import goodsBottom from '../../components/vant/goodsBottom'
import selectedAds from '../../components/detail/selectedAds'
import evaluate from '../../components/detail/evaluate'
import sku from '../../components/vant/sku'
import openGroup from '../../components/detail/openGroup'
import request from '../../request/index'
    export default {
        name: "Detail",
      components:{
          coupon,
          comment,
          products,
          goodsBottom,
          selectedAds,
          evaluate,
          sku,
          openGroup,
      },
      data() {
            return {
              groupList:[],
              joinGroupshow:false,
              limitshow:false,
              storeNums:'',
              finalPrice:'',
              price:1,
              groupShow:false,
              chooseNum:1,
              sku:[],
              show:false,
              groupStatus:1,
              skuid:['',''],
              idInt:'',
              popup:false,
              respon:[],
              is_notice:'',
              types:this.$route.query.type,//this.$route.query.type
              group_ids:this.$route.query.group_id,//this.$route.query.group_id
              join_ids:this.$route.query.join_id,//this.$route.query.join_id
              limit_ids:this.$route.query.limit_id,//this.$route.query.limit_id
              goods_ids:this.$route.query.goods_id,//this.$route.query.goods_id
              limitType:this.$route.query.limitType,
              activity_id:this.$route.query.activity_id	,
              cart_id:0,
              time:'',
              isNew:'',
              promise:[],
              activity:[],
              swipeImg:[],
              coupons:[],
              goodsInfo:{},
              spec:[],
              evalCode:1,
              goodsType:1,
              showBase:false,
              active: 0,
              limit:[],
              group:[],
              limitType:'',
              buyLimit:'',
              presale:'',
              specId:'',
              mesChart:'',
              article_id:0,
              group_type:1,
              normalGoodsType:0,
              groupGoodsType:1,
              is_join_group:0,
              type:'',
              activitys_id:''
            };
        },
      created(){
        request.getProductsDetail(this);
        console.log(this.activitys_id);
      },
      watch:{
        '$route'(to, from) {
          this.$router.go(0);
        }
      },
      mounted(){
        request.seeMore(this);

        $(document).ready(function(){
          $(window).scroll(function() {
            var top = 440; //获取指定位置
            var scrollTop = $(window).scrollTop();  //获取当前滑动位置
            if(scrollTop < top){                 //滑动到该位置时执行代码
              $("header").css('opacity',scrollTop/top);
            }else{
              $("header").css('opacity',1);
            }
          });
        });
      },
      methods:{
        limitShow(){
          this.limitshow = !this.limitshow;
        },
        buyLimitGoods(){
          var b=false;
          this.sku.forEach((v1,i1)=>{
            var a=true;
            this.skuid.forEach((v,i)=>{
              if (v1.spec_array[i].value!=v){
                a=false;
                this.price = 0;
              }
            })
            if (a){
              this.specId=v1.spec_id;
              b=true;
            }
          })
          if(b){
            request.buyGoods(this,this.chooseNum,this.specId,this.normalGoodsType);
          }else{
            this.$toast("请选择完整属性");
          }
        },
        buyGroupGoods(){
          var b=false;
          this.sku.forEach((v1,i1)=>{
            var a=true;
            this.skuid.forEach((v,i)=>{
              if (v1.spec_array[i].value!=v){
                a=false;
                this.price == 0;
              }
            });
            if (a){
              this.specId=v1.spec_id;
              b=true;
            }
          });
          if (b){
              request.buyGoods(this,this.chooseNum,this.specId,this.groupGoodsType);
            }else{
              this.$toast("请选择完整属性");
            }
        },
        buyGoods(){
          var b=false;
          this.sku.forEach((v1,i1)=>{
            var a=true;
            this.skuid.forEach((v,i)=>{
              if (v1.spec_array[i].value!=v){
                a=false;
                this.price = 0;
              }
            })
            if (a){
              this.specId=v1.spec_id;
              b=true;
            }
          })
          if(b){
            request.buyGoods(this,this.chooseNum,this.specId,this.normalGoodsType);
          }else{
            this.$toast("请选择完整属性");
          }
          /*if (a = false){
          }else{

          }*/
        },
        joinChart(){
          var b=false;
          this.sku.forEach((v1,i1)=>{
            var a=true;
            this.skuid.forEach((v,i)=>{
              if (v1.spec_array[i].value!=v){
                a=false;
                this.price = 0;
              }
            })
            if (a){
              this.specId=v1.spec_id;
              b=true;
            }
          })
          if (b){
              request.joinChart(this,this.type,this.goods_ids,this.chooseNum,this.specId);
              this.show = !this.show;
            }else{
              this.$toast("请选择完整属性");
            }

        },
        select(index,ind){
          var itemId = this.spec[index].value[ind].name; //获取选中的id号
          this.skuid.splice(index, 1, itemId); //替换数组id[]中对应的元素，获得所有选中的id
          this.idInt = this.skuid.join(',');
          var b=false;
          this.sku.forEach((v1,i1)=>{
            var a=true;
            this.skuid.forEach((v,i)=>{
              if (v1.spec_array[i].value!=v){
                a=false;
                this.price = 0;
              }
            })
            if (a){
              this.price = 0;
                this.finalPrice = v1.finnal_price;
                this.storeNums = v1.store_nums;
            }
          })
        },
        showSku(){
          this.show = true;
        },
        groupshow(){
          this.groupShow = true;
        },
        groupchoose(){
          this.groupShow = !this.groupShow;
        },
        joinGroup(){
          this.joinGroupshow = !this.joinGroupshow;
          this.popup = false;
        },
        checkMore(){
          this.popup =!this.popup;
        },
        choose(){
          if (this.type == 1){
            this.show = !this.show;
          }else if(this.type== 2){
            this.groupShow = !this.groupShow;
          }else if (this.type == 3) {
            this.limitshow = !this.limitshow;
          }else if (this.type == 6){
            this.show = !this.show;
          }
        },
        Limitchoose(){
          this.limitshow = !this.limitshow;
        },
        produc(){
          document.querySelector("#product").scrollIntoView(true);
        },
        detai(){
          document.querySelector("#detail").scrollIntoView(true);
        },
        good(){
          document.querySelector("#goods").scrollIntoView(true);
        }
      }
    }
</script>

<style scoped lang="scss">
  .containeres .group .open {
    img{
      width: 4vw;
    }
  }
   @media screen and (min-width: 320px) and (max-width: 350px){
     .text{
       width: 94% !important;
     }
   }

  .text{
    width:94%;
    height:7vw;
    margin: 0px auto;
    img{
      float:left;
      margin-top: 2.7vw;
      width:37%;
      height: .5vw;
    }
    p{
      float: left;
      font-size: 16px;
      color: #ff5230;
      margin-left:2vw;
      margin-right:2vw;
    };
  }
  .groupContents{
    .linePrice{
      right:67.5vw;
      top: 1vw;
      position: absolute;
      color: #fff;
      font-family:PingFang-SC-Heavy;
      font-weight:400;
      color:rgba(255,255,255,1);
    }
    .salePrece{
      right:17.5vw;
      top: 1vw;
      position: absolute;
      color: #fff;
      font-family:PingFang-SC-Heavy;
      font-weight:400;
      color:rgba(255,255,255,1);
    }
  }
  .containeres{
    width: 92vw;
    height: auto;
    margin: 0px auto;
    padding-top: 4.3vw;
    margin-bottom: 5vw;
    footer{
      width: 92%;
      height: 16.34vw;
      margin:0px auto;
      button{
        width: 21vw;
        height: 8.3vw;
        background:linear-gradient(-90deg,rgba(255,53,53,1) 0%,rgba(255,66,122,1) 100%);
        float: right;
        margin-top: 4vw;
        font-size: 15px;
        color:#fff;
        border-radius: 1vw;
      }
      .headIcoBox{
        width: 59.67vw;
        height: 10.67vw;
        display: inline-block;
        margin-top: 3vw;
        overflow: scroll;
        div{
          width: 10.67vw;
          height: 10.67vw;
          border: 1px dashed red;
          display: inline-block;
          margin: 0 1.1vw 0 1.1vw;
          border-radius: 6vw;
          float: left;
        }
      }
    }
    .group{
      width:100%;
      height:26.67vw;
      background:rgba(255,255,255,1);
      border:2px solid rgba(255,214,214,1);
      box-shadow:0px 6px 26px 0px rgba(255,153,173,0.2);
      border-radius:4vw;
      margin-top: 4vw;
      .open{
        font-size: 14px;
        color: #666;
        height: 9.34vw;
        line-height: 9.34vw;
        text-indent: 4vw;
        border-bottom: 1px solid #FFE6E6;
      }
    }
    .header{
      text-indent: 1vw;
      font-size: 15px;
      color: #333;
      background: none;
      span{
        font-size: 13px;
        color: #666;
      }
      img{
        width: 3vw;
        height: 3.2vw;
      }
    }
  }
  @media screen and (min-width: 320px) and (max-width:370px){
    .topbar{
      width: 60vw !important;
    }

  }
  .popup{
    width: 100vw;
    height: 60vh;
    background: #fff;
    position: fixed;
    bottom: 0vw;
  }
  #YSF-BTN-HOLDER {
    display: block !important;
  }
  .van-tab span{
    font-size: 20px;
  }
  .van-tabs__wrap{
    width: 20vw;
  }
  .van-tabs--line .van-tabs__wrap{
    width: 20vw !important;
  }
  .chooseDetail{
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,.4);
    position: fixed;
    bottom: 0px;
    z-index: 1000;
      .contents{
        width: 100vw;
        height: 50vh;
        position: absolute;
        bottom: 0px;
        background: #fff;
        border-top: 1px solid #f5f5f5;
            .price{
              position: absolute;
              left: 33vw;
              top: 4vw;
              text-align: left;
            }
            .img{
              width: 25vw;
              height: 25vw;
              position: absolute;
              border: 1px solid #E71F19;
              border-radius: 5px;
              top: -5vw;
              left: 5vw;
            }
        input {
          /*display: none;*/
          position: relative;
          left: 21vw;
          width: .1vw;
        }
        input[type="radio"]+label {
          width: 16vw;
          height: 6.67vw;
          display: inline-block;
          background-color: #f5f5f5;
          color: #333;
          border: none;
          border-radius: 13px;
          text-align: center;
          font-size: 13px;
        }
        input[type="radio"]:checked+label {
          background-color: #ff4c50;
          color: #fff !important;
        }
        .rows {
          display: inline-block;
          margin-left: 1vw;
        }
        .close{
            font-size: 33px;
            position: absolute;
            top: 1vw;
            right: 3vw;
            width: 4vw;
            height: 4vw;
            img{
              width: 100%;
              height: 100%;
              border: none;
            }
          }
      }
  }
  .choose{
    font-size: 15px;
    color: #333;
    width: 100vw;
    height: 14vw;
    background: #fff;
    border-bottom: 3vw solid #f5f5f5;
    line-height: 12vw;
    padding-left: 4vw;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

      span{
        color: #ff4c50;
      }
  }
  header{box-shadow: none;
    background: #333;
    opacity: 0;}
  header.active{
    opacity: 1;
    transition: opacity 1s;
    /* Firefox 4 */
    -moz-transition:opacity 1s;
    /* Safari and Chrome */
    -webkit-transition:opacity 1s;
    /* Opera */
    -o-transition:opacity 1s;
  }
  header{
    width: 100vw;
    height: 10vw;
    line-height: 10vw;
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
   // background: rgba(255,255,255,0);
      span{
        color: #fff;
        text-align: center;
        font-size: 16px;
      }
  }
@font-face {
    font-family: 'iconfont';  /* project id 861873 */
    src: url('//at.alicdn.com/t/font_861873_t78yjy88oh.eot');
    src: url('//at.alicdn.com/t/font_861873_t78yjy88oh.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_861873_t78yjy88oh.woff') format('woff'),
    url('//at.alicdn.com/t/font_861873_t78yjy88oh.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_861873_t78yjy88oh.svg#iconfont') format('svg');
}
$white: #fff;
  .van-tab{
    background: none !important;
  }
.detail-tab {
    width: 100%;
    height: 11.73vw;
    background: linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,0));
    .detail-tabs {
        margin: 0 auto;
        display: flex;

        .detail-share {
            width: 10%;
            display: flex;
            align-items: center;
            .iconfont {
                color: #fff;
            }
        }
    }
}
.evalute{
  font-size: 15px;
  color: #333;
  width: 92%;
  margin: 0px auto;
  background: #fff;
  height: 9vw;
  padding-top: 4vw;
}
.detail-rule-wrap {
    width: 100%;
    height: auto;
    margin-top: 10px;
    //margin-bottom: 10px;
    background: $white;
  border-top: 10px solid #f5f5f5;
        .sku{
          width:100%;
          height:13.3vw;
          border-bottom:1px solid #f5f5f5;
            p{
              width:90%;
              margin:0px auto;
              font-size:15px;
              height:13.3vw;
              line-height:13.3vw;
            }
        }
    .detail-rule {
        width: 90%;
        height: 100%;
        margin: 0 auto;
        ul {
            width: 100%;
            height: 100%;
            li {
                width: 100%;
                height: 50%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 15px;
                .iconfont {
                    color: #666;
                }
                > div {
                    display: flex;
                    .detail-rule-gray {
                        color: #666;
                    }
                    .detail-rule-lightblack {
                        color: #333;
                        > span  {
                            color: #FF4C50;
                        }
                    }
                }
                .detail-rule-specifications > span {
                    &:first-of-type {
                        margin-right: 33px;
                    }
                }
                .detail-rule-coupon > span {
                    margin-right: 17px;
                }
            }
        }
    }
}
.checkComment{
  width:26.67vw;
  height:8vw;
  display: inline-block;
  border:1px solid #FF4C50;
  border-radius: 17px;
  color: #ff4c50;
  text-align: center;
  line-height:8vw;
  font-size:11px;
  margin:0px auto;
  position: relative;
  bottom:10vw;
  left:36.66vw;
}
  @media only screen and (device-width: 375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {
    .iphonex{
      padding-bottom:34px;
      background: #fff;
    }
  }
</style>

<style lang="scss">
  .groupContents{
    .van-goods-action-big-btn{
      line-height: 17vw;
    }
  }

</style>
